<template>
	<view class="address">
		<view class="address-button" v-if="!address.userName">
			<button type="primary" color="#D9557C" size="mini" @click="getAddress">+添加收货地址</button>
		</view>
		
		<view class="address-info" v-else @tap='getAddress'>
			<view class="name-phone">
				<view class="username">
					收货人：{{address.userName}}
				</view>
				<view class="phone">
					电话：{{address.telNumber}}
					<uni-icons type="arrowright" size="16"></uni-icons>
				</view>
			</view>
			<view class="address">
				收货地址：{{allAdress}}
			</view>
		</view>
		<image src="../../static/cart_border@2x.png" mode="scaleToFill"></image>
	</view>
</template>

<script>
	export default {
		name:"ljy-address",
		data() {
			return {
				
			};
		},
		props:['address'],
		computed: {
			allAdress() {
				let str = this.address.provinceName +this.address.cityName + this.address.countyName +this.address.detailInfo
				return str
			}
		},
		props:['address'],
		methods: {
			async getAddress() {
				const res = await uni.chooseAddress();
				console.log(res)
				if(res.errMsg && res.errMsg == 'chooseAddress:ok') {
					uni.setStorageSync('address', res);
				}
			}
		}
	}
</script>

<style lang="scss">
    .address {
		width: 750rpx;
		
		.address-button {
			margin-top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			button {
				background-color: #FDEDAF;
				border: 1px solid #CD9D37;
				color: black;
			}
		}
	    
		.address-info {
			padding: 10rpx;
			display: flex;
			flex-direction: column;
			
			.name-phone {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		image {
			width: 100%;
			height: 10rpx;
		}
    }
</style>